<template>
	<!-- min-width: 150px -->
	<el-aside class="aside-index" scroll-y="true" :style="'width: '+asideW+'px;'">
		<view class="">
			<view v-for="(item,index) in list" :key="index" style="margin: 10px 0px;padding: 0px;overflow: hidden;">
				<view :class="item.click?'dd':'gg'"
					style="margin: 10px 0;height: auto; display: flex;flex-direction: column;justify-content: center;align-items: center;color: #000;"
					@click="clicklist(item)">
					<view v-if="item.click!='mine'" style="width: 30px;height: 36px;">
						<el-image :src="'/static/index/svg'+(item.checked?'/select':'')+'/'+item.icon+'.svg'"
							fit="fill"></el-image>
					</view>
					<view v-else class="cursor-pointer" @click="routed('pages/my/index')" >
						<el-image style="width: 36px; height:36px;border-radius: 50%;" :src="vuex_user.portrait"
							fit="cover">
							<div slot="error" class="image-slot">
								<el-image :src="'/static/index/svg'+(item.checked?'/select':'')+'/'+item.icon+'.svg'"
									fit="fill"></el-image>
							</div>
						</el-image>
					</view>
					<view style="font-size: 15px;">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="bottom_sag" :style="'color:'+shallowColor">
			<view v-for="(item,index) in common_parameters">
				<el-link v-if="isPc" :href="item.url" target="_blank"
					:disabled="item.url?false:true">{{item.name}}</el-link>
				<uv-text v-else @click="routed(item.url)">
					{{item.name}}
				</uv-text>
			</view>
		</view>
	</el-aside>
</template>

<script>
	import config from '@/common/config'
	import {
		uploadFile
	} from '@/common/api.js';
	import helangCompress from '@/components/compress/compress.vue';
	export default {
		components: {
			// 注册组件
			helangCompress
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			asideW: {
				type: Number,
				default: 0
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
		},
		data() {
			return {
				env: config.env,
				list: [{
						name: '社媒',
						icon: 'socialMedia',
						checked: false,
						click: 'socialMedia',
					},
					{
						name: '社群',
						icon: 'community',
						click: 'community',
						checked: false,
					},
					{
						name: '创发',
						icon: 'chuangfa',
						click: 'chuangfa',
						checked: false
					},
					{
						name: '商链',
						icon: 'businessChain',
						click: 'businessChain',
						checked: false,
					},
					{
						name: '我的',
						icon: 'mine',
						click: 'mine',
						checked: false
					}
				],
				common_parameters: [{
					name: '粤ICP备16085192号',
					url: 'https://beian.miit.gov.cn',
				}],
				clickStr: '',
			}
		},
		onLoad() {},
		watch: {
			// 监听data数据的变化
			obj(newVal, oldVal) {
				this.$emit('obj', newVal);
			},
		},
		mounted() {},
		methods: {
			clicklist(ite) {
				if (ite.frist) {
					return;
				}
				this.list.map((item, index) => {
					item.checked = item.name === ite.name ? true : false
				})
				this.clickStr = ite.click;
				this.$emit('click', ite.click);
				// if (ite.click) this.routed(ite.click);
				// this.list.map((item, index) => {
				// 	item.checked = item.name === ite.name ? true : false
				// })
			},
			routed(url) {
				// console.log('routed', url)
				uni.$uv.route({
					url: url + '?_=' + uni.$uv.random(0, 999),
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.aside-index {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: calc(100vh - 50px);
		transition: width 2s;
		padding-top: 10px;
		border-right: 1px solid #E9ECEF;

		.dd {
			cursor: pointer;
		}

		.gg {
			opacity: 0.5;
		}

		.header-sticky-top {
			// height: 39px;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			/* 粘性定位的容器距离顶部的距离 */
			background-color: #fff;
			z-index: 10;
			/* 确保菜单在页面内容之上 */
		}

		.bottom_sag {
			margin-bottom: 10px;

			::v-deep .el-link--inner {
				width: calc(100% - 20px);
				// overflow: hidden;
				font-size: 12px !important;
				margin: 2px 5px;
				white-space: normal;
				color: #999999;
				overflow-wrap: break-word;
			}
		}
	}
</style>